<template>
  <div class="menu-preview">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-openeds="[]" :unique-opened="true" class="el-menu-vertical-demo" default-active="0">
        <el-image v-if="false" class="menu-logo" src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg" fit="cover"></el-image>
        
        <el-submenu index="0" @click.native="menuHandler('')" class="menu-item">
          <template slot="title">
            <i v-if='true' class="el-icon-menu el-icon-s-home menu-icon" />
            <span class="menu-text">系统首页</span>
          </template>
        </el-submenu>
        
        <el-submenu index="1" class="menu-item">
          <template slot="title">
            <i v-if='true' class="el-icon-menu el-icon-user-solid menu-icon" />
            <span class="menu-text">个人中心</span>
          </template>
          <el-menu-item index="1-1" @click="menuHandler('updatePassword')" class="submenu-item">修改密码</el-menu-item>
          <el-menu-item index="1-2" @click="menuHandler('center')" class="submenu-item">个人信息</el-menu-item>
        </el-submenu>

        <el-submenu v-for="(menu,index) in menuList.backMenu" :key="menu.menu" :index="index+2+''" class="menu-item">
          <template slot="title">
            <i v-if='true' class="el-icon-menu menu-icon" :class="icons[index]" />
            <span class="menu-text">{{ menu.menu }}</span>
          </template>
          <el-menu-item v-for="(child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)" class="submenu-item">
            {{ child.menu }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import menu from '@/utils/menu'
export default {
  data() {
    return {
      menuList: [],
      dynamicMenuRoutes: [],
      role: '',
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order', 
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-chat-dot-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
      ],
      menulistBorderBottom: {},
    }
  },
  mounted() {
    const menus = menu.list()
    if(menus) {
      this.menuList = menus
    } else {
      let params = {
        page: 1,
        limit: 1,
        sort: 'id',
      }
      
      this.$http({
        url: "menu/list",
        method: "get",
        params: params
      }).then(({
        data
      }) => {
        if (data && data.code === 0) {
          this.menuList = JSON.parse(data.data.list[0].menujson);
          this.$storage.set("menus", this.menuList);
        }
      })
    }
    this.role = this.$storage.get('role')
    
    for(let i=0;i<this.menuList.length;i++) {
      if(this.menuList[i].roleName == this.role) {
        this.menuList = this.menuList[i];
        break;
      }
    }
    this.styleChange()
  },
  created(){
    this.icons.sort(()=>{
      return (0.5-Math.random())
    })
  },
  methods: {
    styleChange() {
      this.$nextTick(() => {
        document.querySelectorAll('.el-menu-vertical-demo .el-submenu .el-menu').forEach(el => {
          el.removeAttribute('style')
          const icon = {"border":"none","margin":"0px 0 0","background":"none","display":"none"}
          Object.keys(icon).forEach((key) => {
          el.style[key] = icon[key]
          })
        })
      })
    },
    menuHandler(name) {
      let router = this.$router
      name = '/'+name
      router.push(name)
    },
  }
}
</script>

<style lang="scss" scoped>
.menu-preview {
  height: 100%;
  background: #2b2f3a;

  .el-scrollbar {
    height: 100%;
    
    /deep/ .scrollbar-wrapper {
      overflow-x: hidden;
    }
  }

  .menu-logo {
    width: 44px;
    height: 44px;
    margin: 10px auto;
    border-radius: 50%;
    display: block;
    object-fit: cover;
  }

  .el-menu-vertical-demo {
    border: none;
    background: transparent;
    
    .menu-item {
      .menu-icon {
        width: 24px;
        font-size: 18px;
        margin-right: 8px;
        color: #bfcbd9;
      }

      .menu-text {
        color: #bfcbd9;
        font-size: 14px;
      }

      /deep/ .el-submenu__title {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        color: #bfcbd9;
        background: transparent;
        border-bottom: 1px solid rgba(255,255,255,0.05);

        &:hover {
          background: #263445;
        }

        .el-submenu__icon-arrow {
          color: #bfcbd9;
        }
      }

      .submenu-item {
        height: 45px;
        line-height: 45px;
        padding: 0 20px 0 40px;
        color: #bfcbd9;
        background: #1f2d3d;
        font-size: 14px;

        &:hover {
          color: #409EFF;
          background: #001528;
        }

        &.is-active {
          color: #409EFF;
          background: #001528;
        }
      }
    }
  }
}
</style>
